<template>
  <PublicPage bgColor="#F5F5F5">
    <view class="bg-white sticky top-0 z-[99]">
      <view class="p-3 border-0 border-b border-solid border-zinc-200">
        <u-search
        v-model="searchData.searchValue"
        shape="square"
        height="80rpx"
        placeholder="医生姓名 / 患者姓名 / 电话"
        :animation="true"
        @search="search"
        @custom="search"
        @clear="search"
        ></u-search>
      </view>
      <u-tabs :list="list" class="orderTabs" :current="tabsCurrent" @change="tabsChange"></u-tabs>
    </view>

    <view
      v-for="(item, index) in dataList"
      :key="index"
      class="px-3 mx-2 mt-3 bg-white rounded-lg"
      @click="goOrderDetail(item)">
      <view class="flex justify-between items-center py-1 borderBottom">
        <view
          class="flex justify-between items-center pt-1 pb-2 fz-12 u-tips-color">
          <view>
            开单时间：
            <text>{{ item.createTime }}</text>
          </view>
        </view>
        <view>
          <u-tag v-if="item.status === OrderStatusEnum.WAITSIGNED" text="待签收" size="mini" plain plainFill type="primary"></u-tag>
          <u-tag v-else-if="item.status === OrderStatusEnum.PHARMACY" text="待发货" size="mini" plain plainFill type="success"></u-tag>
          <u-tag v-else-if="item.status === OrderStatusEnum.EXPRERT" text="待付款" size="mini" plain plainFill type="error"></u-tag>
          <u-tag v-else-if="item.status === OrderStatusEnum.DONE" text="已完成" size="mini" plain plainFill bgColor="#e7faf0" color="#13ce66" borderColor="#d0f5e0"></u-tag>
          <u-tag v-else-if="item.status === '4'" text="已取消" size="mini" plain plainFill bgColor="#f4f4f5" color="#909399" borderColor="#e9e9eb"></u-tag>
          <u-tag v-else-if="item.status === '5'" text="交易关闭" size="mini" plain plainFill bgColor="#ffeded" color="#ff4949" borderColor="#ffdbdb"></u-tag>
          <u-tag v-else-if="item.status === '5'" text="交易关闭" size="mini" plain plainFill bgColor="#ffeded" color="#ff4949" borderColor="#ffdbdb"></u-tag>
          <u-tag v-else-if="item.status === '6'" text="待采购" size="mini" plain plainFill type="success"></u-tag>
        </view>
      </view>

      <UserCard
        :avatar="item.sponsorInfo.headimg"
        avatar-class="w-10 h-10 rounded-full"
        :userName="item.sponsorInfo.userName"
        :deptName="item.sponsorInfo.deptname"
        :postName="item.sponsorInfo.postName"
        :com="item.sponsorInfo.com"
        :mobile="item.sponsorInfo.mobile"
        >
      </UserCard>

      <view class="py-2 borderTop">
        <text class="u-content-color">处方金额</text>
        <text class="pl-1 u-content-color">合计:</text>
        <!-- <text class="pl-1 u-error">￥{{ item.cost }}</text> -->
        <text class="pl-1 u-error">￥{{ (item.costOriginal - item.expressCost - item.dosageformCost).toFixed(2) }}</text>
      </view>

      <view class="py-3 borderTop">
        <view class="flex justify-between items-center">
          <view>
            <view v-for="(sheetItem,sheetIndex) in item.sheetList" :key="sheetIndex" class="flex pb-2">
              <u-tag :text="sheetItem.dictLabel" plain size="mini"></u-tag>
              <text class="pl-3">
                <u-tag v-if="item.parescriptOrder && item.parescriptOrder.dosageformValue" class="pr-3" plain type="warning" size="mini" :text="getDictLabel(dosageformOptions, item.parescriptOrder.dosageformValue)"></u-tag>
                <template v-if="item.parescriptOrder && item.parescriptOrder.regulateDosage">
                  <text class="px-[2rpx]">共{{item.parescriptOrder.regulateDosage.courseNum}}疗程</text>
                  <text class="px-[2rpx]">，{{ sheetItem.prescriptNum }}剂</text>
                  <text v-if="sheetItem.takeType === 1" class="px-[2rpx]">，口服</text>
                  <text v-if="sheetItem.takeType === 2" class="px-[2rpx]">，外用</text>
                  <text class="px-[2rpx]">，每日{{ item.parescriptOrder.regulateDosage.usageDose }}次</text>
                  <text class="px-[2rpx]">，每次{{ item.parescriptOrder.regulateDosage.onceDose }}袋/格</text>。
                </template>
                <template v-else>
                  <text v-if="sheetItem.serviceItems == 4 && sheetItem.prescriptNum">共{{ sheetItem.prescriptNum }}剂</text>
                  <text v-else>共 {{ sheetItem.itemNum }} 项</text>
                  <text v-if="sheetItem.takeType === 1" class="px-[2rpx]">，口服</text>
                  <text v-if="sheetItem.takeType === 2" class="px-[2rpx]">，外用</text>
                  <text v-if="sheetItem.usageDose" class="px-[2rpx]">，每日{{ sheetItem.usageDose }}次</text>
                  <text v-if="sheetItem.onceDose" class="px-[2rpx]">，每次{{ sheetItem.onceDose }}袋/格</text>。
                </template>
              </text>
            </view>
          </view>
          <view class="flex-shrink-0">
            <i class="iconfont u-tips-color fz-12">&#xe60d;</i>
          </view>
        </view>
        
        <view v-if="item.mailingInfo" class="p-3 mt-2 rounded-md u-info-light-bg">
          <view v-if="item.mailingInfo.logisticType === 0 && item.mailingInfo.mailingWay === 3">快递（邮寄给患者）</view>
          <view v-if="item.mailingInfo.logisticType === 0 && item.mailingInfo.mailingWay === 2">快递（邮寄给诊所）</view>
          <view v-if="item.mailingInfo.logisticType === 1">配送点自取</view>
          <view v-if="item.mailingInfo.logisticType === 2">无需物流</view>
          <view v-if="item.mailingInfo.logisticType === 3">同城配送</view>
          <template v-if="item.mailingInfo.logisticType === 0 || item.mailingInfo.logisticType === 3">
            <view class="flex items-center pt-2 leading-8">
              <text>{{ item.mailingInfo.recipientName }}</text>
              <text class="pl-3">{{ maskPhone(item.mailingInfo.recipientPhone) }}</text>
            </view>
            <view>{{ item.mailingInfo.province + item.mailingInfo.mailingAddr }}</view>
          </template>
        </view>
      </view>
    </view>

    <Empty v-if="loadStatus === 'nomore' && dataList.length === 0" :type="3" />
    <LoadMore  v-else :status="loadStatus" />
  </PublicPage>
</template>

<script setup lang="ts">
import UserCard from '@/components/userCard.vue'
import { getOrderList } from "@/api/order";
import { usePageList } from "@/hooks/usePageList";
import { OrderStatusEnum } from "@/utils/enums";
import { OrderItmeTypes } from '@/types/order'
import { callPhone, maskPhone } from "@/utils";
import Empty from "@/components/empty.vue";
import LoadMore from "@/components/loadMore.vue";
import { dictData, DictItemTypes, getDictLabel } from '@/api/dict'

const list = ref([
  {
    name: '全部',
    value: ''
  },
  {
    name: '待医生付款',
    value: OrderStatusEnum.EXPRERT
  },
  {
    name: '待药房发货',
    value: OrderStatusEnum.PHARMACY
  },
  {
    name: '待签收',
    value: OrderStatusEnum.WAITSIGNED
  },
  {
    name: '已完成',
    value: OrderStatusEnum.DONE
  }
]);

const tabsCurrent = ref(0) // tabs选中下标
const tabsChange = (val: {
  name: string
  value: OrderStatusEnum
  index: number
}) => {
  tabsCurrent.value = val.index
  searchData.status = val.value
  search()
  
  // h5切换tab滚动到顶部
  // #ifdef H5
  uni.pageScrollTo({
    scrollTop:0,
    duration:200
  })
  // #endif
}


// 查询列表参数
const searchData = reactive({
  status: '',
  searchValue: '',
})

// 获取列表
const { getList, search, list: dataList, status: loadStatus } = usePageList<OrderItmeTypes>((params) =>
  getOrderList({ ...params, ...searchData })
);

const goOrderDetail = (item: OrderItmeTypes) => {
  uni.$u.route({
    type: 'navigateTo',
    url: `/pages/order/orderDetail`,
    params: {
      id: item.id
    }
  })
}

// 获取剂型列表
const dosageformOptions = ref<DictItemTypes[]>([])
const getDosageformOptions = async () => {
  const { data } = await dictData('tcm_dosageform_type') // 获取字典中的数据
  dosageformOptions.value = data
}
getDosageformOptions()

onLoad(() => {
  getList();
});
// 下拉刷新
onPullDownRefresh(async () => {
  try {
    await search()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  } catch (error) {
    uni.stopPullDownRefresh()
  }
});
// 加载更多
onReachBottom(()=>{
  getList();
});
</script>

<style lang="scss" scoped>
.orderTabs{
  ::v-deep .u-tabs__wrapper__nav__item{
    padding: 0 22rpx !important;
  }
}
</style>
